<template>
  <div class="Production">
    <div class="Productionhead">
      <span class="Productionname" style="font-size: 45px">{{ data.print_work_No }}</span>
      <img class="Productionbarcode" :src="data.barcode" alt="">
    </div>
    <table class="Productiontable" cellpadding="0">
      <tr>
        <td>客户</td>
        <td colspan="2" style="overflow: hidden; text-overflow:ellipsis; white-space: nowrap;">{{ data.baseusername }}
        </td>
        <td colspan="2">机器名称</td>
        <td colspan="3" style="overflow: hidden; text-overflow:ellipsis; white-space: nowrap;">{{ data.mch_name }}</td>
        <td>接单</td>
        <td colspan="2">{{ data.work_get_time }}</td>
        <td>工期</td>
        <td colspan="2">{{ data.work_end_time }}</td>
      </tr>
      <tr>
        <td></td>
        <td v-for="item in 10"> {{ item }}道</td>
        <td>层高</td>
        <td>销售</td>
        <td style="overflow: hidden; text-overflow:ellipsis; white-space: nowrap;">{{ data.u_name }}</td>
      </tr>
      <tr>
        <td rowspan="2">一
          <span v-if="data.slot_group[0].slot_type===21001">/ 弹</span>
          <span v-else-if="data.slot_group[0].slot_type===21002">/ 履</span>
          <span v-else-if="data.slot_group[0].slot_type===21003">/ 格</span>
          <span v-else-if="data.slot_group[0].slot_type===21004">/ 推</span>
          <span v-else>层</span>
        </td>
        <td rowspan="2" v-for="item in data.slot_group[0].column_list">
          <span v-if="data.slot_group[0].slot_type===21001">{{ item.count }}</span>
          <span v-else-if="data.slot_group[0].slot_type===21002">{{ item.count }}</span>
          <span v-else-if="data.slot_group[0].slot_type===21003">{{ item.count }}</span>
          <span v-else-if="data.slot_group[0].slot_type===21004&&item.install_hole_position">
            第{{ item.install_hole_position }}孔</span>
          <span v-else>{{ item.count }}</span>
        </td>
        <td rowspan="2">{{ data.slot_group[0].hight }}</td>
        <td>制冷</td>
        <td>
          <span v-if="data.can_cold===true">有</span>
          <span v-if="data.can_cold===false">无</span>
        </td>
      </tr>
      <tr>
        <td>制热</td>
        <td>
          <span v-if="data.can_hot===true">有</span>
          <span v-if="data.can_hot===false">无</span>
        </td>
      </tr>
      <tr>
        <td rowspan="2">二
          <span v-if="data.slot_group[1].slot_type===21001">/ 弹</span>
          <span v-else-if="data.slot_group[1].slot_type===21002">/ 履</span>
          <span v-else-if="data.slot_group[1].slot_type===21003">/ 格</span>
          <span v-else-if="data.slot_group[1].slot_type===21004">/ 推</span>
          <span v-else>层</span>
        </td>
        <td rowspan="2" v-for="item in data.slot_group[1].column_list">
          <span v-if="data.slot_group[1].slot_type===21001">{{ item.count }}</span>
          <span v-else-if="data.slot_group[1].slot_type===21002">{{ item.count }}</span>
          <span v-else-if="data.slot_group[1].slot_type===21003">{{ item.count }}</span>
          <span v-else-if="data.slot_group[1].slot_type===21004&&item.install_hole_position">
            第{{ item.install_hole_position }}孔</span>
          <span v-else>{{ item.count }}</span>
        </td>
        <td rowspan="2">{{ data.slot_group[1].hight }}</td>
        <td>负离</td>
        <td>
          <span v-if="data.can_anion===true">有</span>
          <span v-if="data.can_anion===false">无</span>
        </td>
      </tr>
      <tr>
        <td>颜色</td>
        <td >{{ data.color }}</td>
      </tr>
      <tr>
        <td rowspan="2">三
          <span v-if="data.slot_group[2].slot_type===21001">/ 弹</span>
          <span v-else-if="data.slot_group[2].slot_type===21002">/ 履</span>
          <span v-else-if="data.slot_group[2].slot_type===21003">/ 格</span>
          <span v-else-if="data.slot_group[2].slot_type===21004">/ 推</span>
          <span v-else>层</span>
        </td>
        <td rowspan="2" v-for="item in data.slot_group[2].column_list">
          <span v-if="data.slot_group[2].slot_type===21001">{{ item.count }}</span>
          <span v-else-if="data.slot_group[2].slot_type===21002">{{ item.count }}</span>
          <span v-else-if="data.slot_group[2].slot_type===21003">{{ item.count }}</span>
          <span v-else-if="data.slot_group[2].slot_type===21004&&item.install_hole_position">
            第{{ item.install_hole_position }}孔</span>
          <span v-else>{{ item.count }}</span>
        </td>
        <td rowspan="2">{{ data.slot_group[2].hight }}</td>
        <td>纸币</td>
        <td>
          <span v-if="data.can_cash===true">有</span>
          <span v-if="data.can_cash===false">无</span>
        </td>
      </tr>
      <tr>
        <td colspan="2" rowspan="9" valign="top" align="left">生产备注:{{ data.work_order_mark }}</td>
        <!-- <td colspan="2" rowspan="12" valign="top" align="left">生产备注:{{ data.work_order_mark }}</td> -->
      </tr>
      <tr>
        <td rowspan="2">四
          <span v-if="data.slot_group[3].slot_type===21001">/ 弹</span>
          <span v-else-if="data.slot_group[3].slot_type===21002">/ 履</span>
          <span v-else-if="data.slot_group[3].slot_type===21003">/ 格</span>
          <span v-else-if="data.slot_group[3].slot_type===21004">/ 推</span>
          <span v-else>层</span>
        </td>
        <td rowspan="2" v-for="item in data.slot_group[3].column_list">
          <span v-if="data.slot_group[3].slot_type===21001">{{ item.count }}</span>
          <span v-else-if="data.slot_group[3].slot_type===21002">{{ item.count }}</span>
          <span v-else-if="data.slot_group[3].slot_type===21003">{{ item.count }}</span>
          <span v-else-if="data.slot_group[3].slot_type===21004&&item.install_hole_position">
            第{{ item.install_hole_position }}孔</span>
          <span v-else>{{ item.count }}</span>
        </td>
        <td rowspan="2">{{ data.slot_group[3].hight }}</td>
      </tr>
      <tr></tr>
      <tr>
        <td rowspan="2">五
          <span v-if="data.slot_group[4].slot_type===21001">/ 弹</span>
          <span v-else-if="data.slot_group[4].slot_type===21002">/ 履</span>
          <span v-else-if="data.slot_group[4].slot_type===21003">/ 格</span>
          <span v-else-if="data.slot_group[4].slot_type===21004">/ 推</span>
          <span v-else>层</span>
        </td>
        <td rowspan="2" v-for="item in data.slot_group[4].column_list">
          <span v-if="data.slot_group[4].slot_type===21001">{{ item.count }}</span>
          <span v-else-if="data.slot_group[4].slot_type===21002">{{ item.count }}</span>
          <span v-else-if="data.slot_group[4].slot_type===21003">{{ item.count }}</span>
          <span v-else-if="data.slot_group[4].slot_type===21004&&item.install_hole_position">
            第{{ item.install_hole_position }}孔</span>
          <span v-else>{{ item.count }}</span>
        </td>
        <td rowspan="2">{{ data.slot_group[4].hight }}</td>
      </tr>
      <tr></tr>
      <tr>
        <td rowspan="2">六
          <span v-if="data.slot_group[5].slot_type===21001">/ 弹</span>
          <span v-else-if="data.slot_group[5].slot_type===21002">/ 履</span>
          <span v-else-if="data.slot_group[5].slot_type===21003">/ 格</span>
          <span v-else-if="data.slot_group[5].slot_type===21004">/ 推</span>
          <span v-else>层</span>
        </td>
        <td rowspan="2" v-for="item in data.slot_group[5].column_list">
          <span v-if="data.slot_group[5].slot_type===21001">{{ item.count }}</span>
          <span v-else-if="data.slot_group[5].slot_type===21002">{{ item.count }}</span>
          <span v-else-if="data.slot_group[5].slot_type===21003">{{ item.count }}</span>
          <span v-else-if="data.slot_group[5].slot_type===21004&&item.install_hole_position">
            第{{ item.install_hole_position }}孔</span>
          <span v-else>{{ item.count }}</span>
        </td>
        <td rowspan="2">{{ data.slot_group[5].hight }}</td>
      </tr>
      <tr></tr>
      <tr>
        <td rowspan="2">七
          <span v-if="data.slot_group[6].slot_type===21001">/ 弹</span>
          <span v-else-if="data.slot_group[6].slot_type===21002">/ 履</span>
          <span v-else-if="data.slot_group[6].slot_type===21003">/ 格</span>
          <span v-else-if="data.slot_group[6].slot_type===21004">/ 推</span>
          <span v-else>层</span>
        </td>
        <td rowspan="2" v-for="item in data.slot_group[6].column_list">
          <span v-if="data.slot_group[6].slot_type===21001">{{ item.count }}</span>
          <span v-else-if="data.slot_group[6].slot_type===21002">{{ item.count }}</span>
          <span v-else-if="data.slot_group[6].slot_type===21003">{{ item.count }}</span>
          <span v-else-if="data.slot_group[6].slot_type===21004&&item.install_hole_position">
            第{{ item.install_hole_position }}孔</span>
          <span v-else>{{ item.count }}</span>
        </td>
        <td rowspan="2">{{ data.slot_group[6].hight }}</td>
      </tr>
      <tr></tr>
      <tr>
        <td rowspan="2">八
          <span v-if="data.slot_group[7].slot_type===21001">/ 弹</span>
          <span v-else-if="data.slot_group[7].slot_type===21002">/ 履</span>
          <span v-else-if="data.slot_group[7].slot_type===21003">/ 格</span>
          <span v-else-if="data.slot_group[7].slot_type===21004">/ 推</span>
          <span v-else>层</span>
        </td>
        <td rowspan="2" v-for="item in data.slot_group[7].column_list">
          <span v-if="data.slot_group[7].slot_type===21001">{{ item.count }}</span>
          <span v-else-if="data.slot_group[7].slot_type===21002">{{ item.count }}</span>
          <span v-else-if="data.slot_group[7].slot_type===21003">{{ item.count }}</span>
          <span v-else-if="data.slot_group[7].slot_type===21004&&item.install_hole_position">
            第{{ item.install_hole_position }}孔</span>
          <span v-else>{{ item.count }}</span>
        </td>
        <td rowspan="2">{{ data.slot_group[7].hight }}</td>
        <td colspan="2" rowspan="3" valign="top" align="left">BOM名称:{{ data.bom_name }}</td>
      </tr>
      <tr></tr>
      <tr>
        <td>地址</td>
        <td colspan="11" style="overflow: hidden; text-overflow:ellipsis; white-space: nowrap;">
          {{ data.province }}{{ data.city }}{{ data.district }}{{ data.address }}
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    name: "ProductionList",
    props: ['work_order_details_id'],
    data() {
      return {
        barcode: '',
        data: {
          slot_group: [{
            column_list: [],
            hight: '',
          }, {
            column_list: [],
            hight: '',
          }, {
            column_list: [],
            hight: '',
          }, {
            column_list: [],
            hight: '',
          }, {
            column_list: [],
            hight: '',
          }, {
            column_list: [],
            hight: '',
          }, {
            column_list: [],
            hight: '',
          }, {
            column_list: [],
            hight: '',
          }],
        },
      }
    },
    watch: {
      work_order_details_id: function (newVal, oldVal) {
        this.work_order_details_id = newVal;
        this.getdata();
      },
    },
    created() {
      this.getdata()
    },
    methods: {
      getdata() {
        this.$get(this.$api + '/sale/get_work_details_model?', {
            'work_order_details_id': this.work_order_details_id,
          })
          .then((res) => {
            if (res.code === 0) {
              this.data = res.data
              if (this.data.work_get_time !== null) {
                this.data.work_get_time = this.data.work_get_time.substring(0, 10)
              }
              if (this.data.work_end_time !== null) {
                this.data.work_end_time = this.data.work_end_time.substring(0, 10)
              }
              if (this.data.color !== null) {
                this.data.color = this.data.color.substring(0, 4)
              }
              if (this.data.work_order_mark !== null) {
                this.data.work_order_mark = this.data.work_order_mark.substring(0, 85)
              }
              var data = []
              for (var i = 0; i < 8; i++) {
                if (JSON.parse(this.data.slot_group)[i] === undefined) {
                  var column_list = [];
                  for (var c = 0; c < 10; c++) {
                    var obj = {};
                    obj.column_index = c + 1;
                    obj.count = "";
                    column_list.push(obj);
                  }
                  data.push({
                    column_list: column_list,
                    hight: "",
                  })
                } else {
                  data.push(JSON.parse(this.data.slot_group)[i])
                }
              }
              this.data.slot_group = data
              console.log(this.data);
              console.log(this.data.slot_group);
            } else {
              this.$notify({
                title: '失败',
                message: res.msg,
                type: 'error'
              });
            }
          });
      }
    },
  }

</script>

<style scoped>
  .Productiontable {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    word-break: break-all;
    white-space: normal;
    word-wrap: break-word;
  }

  .Productiontable tr {
    height: 20px;
  }

  .Productiontable tr td {
    width: 70px;
    max-width: 70px;
    height: 20px;
    border: 1px solid #000000;
  }

  .Productionhead {
    margin-bottom: 10px;
  }

  .Productionname {
    color: black;
    display: inline-block;
    width: 50%;
    height: 80px;
    line-height: 80px;
    font-size: 45px;
  }

  .Productionbarcode {
    max-width: 50%;
    height: 80px;
    float: right;
  }

</style>
